<template>
  <div class="msg_person">
    <el-card class="content">
      <el-table :data="list" element-loading-text="Loading" border fit highlight-current-row>
        <el-table-column label="序号" width="80" align="center" type="index" :index="indexMethod">
        </el-table-column>
        <el-table-column label="回复人信息" align="center">
          <template slot-scope="scope">
            {{ scope.row.userName || "匿名" }}
          </template>
        </el-table-column>
        <el-table-column label="回复内容">
          <template slot-scope="scope">
            {{scope.row.content}}
          </template>
        </el-table-column>
        <el-table-column label="源自" align="center">
          <template slot-scope="scope">
            {{scope.row.messageId?'留言ID：' + scope.row.messageId:'评论ID：'+scope.row.commentId}}
          </template>
        </el-table-column>
        <el-table-column class-name="status-col" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.read | statusFilter">{{
            scope.row.read | statusFilterText
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="">回复</el-button>
            <el-button size="mini" type="danger" @click="handleRead(scope.row.id)">已读</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background :current-page.sync="page" layout="total, prev, pager, next" :total="count" @current-change="handleCurrentChange" />
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'MsgPerson',
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: 'danger',
        1: 'success',
      }
      return statusMap[status]
    },
    // 回复状态：0-未读,1-已读
    statusFilterText(status) {
      const statusMap = {
        0: '未读',
        1: '已读',
      }
      return statusMap[status]
    },
  },
  data() {
    return {
      list: null,
      listLoading: true,
      count: 0,
      page: 1,
    }
  },
  computed: {
    admin() {
      return this.$store.state.admin
    },
  },
  watch: {
    '$store.state.admin': {
      handler(value) {
        if (value.userId) {
          this.getMsgPerson()
        }
      },
      immediate: true,
      deep: true
    }
    // '$store.state.admin':(n,o)=>{
    //   console.log('admin', n.userId,o)
    // } 
  },
  methods: {
    // 自定义表格索引
    indexMethod(index) {
      return (this.page - 1) * this.size + index + 1
    },
    // 获取我的回复
    getMsgPerson() {
      // 获取管理员ID
      const { userId } = this.admin
      if (userId) {
        this.$api.httpUserReply(userId).then((res) => {
          if (res.code == 200) {
            this.list = res.data.rows || []
            this.count = res.data.meta.count
          }
        })
      }
    },
    // 更新回复阅读状态
    handleRead(id) {
      this.$api.httpReplyUpdate({ id, read: 1 }).then(res => {
        if (res.code == 200) {
          this.getMsgPerson()
        }
      })
    },
    // 点击页码
    handleCurrentChange(page) { },
  },
}
</script>

<style scoped lang="scss">
.pagination {
  display: flex;
  justify-content: center;
  margin: 24px 0;
}
</style>
